<template>
	<view class="w-100" v-if="first">
		<view class="chat-title ss-p-x-20 ss-m-t-20 ss-m-b-15">聊天消息</view>
		<su-tabs :list="typeList" :dot="true" background="transparent" @change="onTabsChange" :current="index"
			:borderShow="false" :activeStyle="state.subActiveStyle" :inactiveStyle="state.inactiveStyle" lineWidth="15"
			lineHeight="0" lineColor="#3172E1"></su-tabs>
		<l-swipeAction :ref="`swipeActionRefs${index}`" :options="[{
				'name': item.top === 0 ? '置顶' : '取消置顶',
				'background': item.top === 0 ? '#FCB05E' : '#4249C6',
				'item':item,
				...state.options1
			},{
		'item':item,
		...state.options2
	}]" @clickItem="clickItem" v-for="(item, index) in chatList" :key="item.id"
			@swipeActionShown="handleSwipeActionShown(index)">
			<chatItem :data="item" :showType="item.type" @resetSwipe="resetSwipe"></chatItem>
		</l-swipeAction>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		nextTick,
		getCurrentInstance
	} from 'vue';
	import sheep from '@/sheep';
	import chatItem from './chat-item.vue'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'
	
	const {
		proxy
	} = getCurrentInstance();

	const iMMyInfo = computed(() => $store().userInfo);
	const chatList = computed(() => $store().messageList);
	const typeList = computed(() => $store().typeList)
	const index = computed(() => $store().index)
	const first = computed(() => $store().first)

	const swipeActionRefs = ref(null)

	const state = reactive({
		subActiveStyle: {
			'font-size': '32rpx',
			'color': '#222222',
		},
		inactiveStyle: {
			'font-size': '32rpx',
			'color': '#929292'
		},
		options1: {
			type: 'top',
			width: 144,
			color: '#fff',
		},
		options2: {
			type: 'delete',
			name: '删除',
			width: 144,
			background: '#FF4D4D',
			color: '#fff',
		}
	})
	
	const clickItem = async (e) => {
		if (e.type === 'top') {
			const {
				code
			} = await imApi.setTop({
				conversations_id: e.item.id,
				im_id: iMMyInfo.value.userID
			})
	
			if (code === 0) {
				$store().setTop(e.item.id, e.item.top == 1 ? 0 : 1)
				chatList.value.forEach(async (item, index) => {
					if (proxy.$refs[`swipeActionRefs${index}`][0].isShowBtn) {
						proxy.$refs[`swipeActionRefs${index}`][0].closeSwipe()
						await nextTick();
					}
				});
			}
		} else {
			uni.showModal({
				title: '提示',
				content: '删除聊天记录将无法恢复，请确认删除!',
				cancelText: '取消',
				confirmText: '确认删除',
				async success(res) {
					if (res.confirm) {
						const {
							code
						} = await imApi.deleteConversation({
							id: e.item.id,
							from_account: iMMyInfo.value.userID
						})
						if (code === 0) {
							chatList.value.forEach(async (item, index) => {
								if (proxy.$refs[`swipeActionRefs${index}`][0]
									.isShowBtn) {
									proxy.$refs[`swipeActionRefs${index}`][0]
										.closeSwipe()
									await nextTick();
								}
							});
							$store().deleteMessage(e.item.id)
						}
					}
				}
			});
		}
	}
	
	const resetSwipe = () => {
		chatList.value.forEach(async (item, index) => {
			if (proxy.$refs[`swipeActionRefs${index}`][0].isShowBtn) {
				proxy.$refs[`swipeActionRefs${index}`][0].closeSwipe()
				await nextTick();
			}
		});
	}
	
	
	const handleSwipeActionShown = (currentIndex) => {
		chatList.value.forEach(async (item, index) => {
			if (index !== currentIndex) {
				proxy.$refs[`swipeActionRefs${index}`][0].closeSwipe()
				await nextTick();
			}
		});
	}


	const onTabsChange = (e) => {
		if (e === index.value) {
			return
		}
		$store().changeIndex(e.index)
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.chat-title {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;
	}
</style>